
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>我的消息</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <th:block th:include="common/link::link"></th:block>

</head>
<body>

<div class="header">
  <th:block th:include="common/header::header"></th:block>
</div>

<div class="main fly-user-main layui-clear">
  <th:block th:include="common/left::left"></th:block>
  
  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>

  <div class="fly-panel fly-panel-user" pad20>

    <div class="layui-tab layui-tab-brief" lay-filter="">
      <ul class="layui-tab-title">
        <li class="layui-this">评论消息</li>
        <li>系统消息<span class="layui-badge-dot"></span></li>
      </ul>
      <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
          <button class="layui-btn layui-btn-radius" onclick="read(0)">
             标记所有为已读
          </button>
          <hr>
          <ul class="jie-row">
            <th:block th:if="${not #lists.isEmpty(commentVoList)}">
              <th:block th:each="comment,index:${commentVoList}">
                <li>
                  <span class="fly-jing" th:text="${comment.nickName}">评论人</span>
                  <a>在</a>
                  <span th:text="${comment.title}">哪篇文章</span>
                  <a>说：</a>
                  <a href="#" class="jie-title" th:text="${comment.content}">评论内容</a>
                  <em th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm:ss')}">2018-01-08</em>
                </li>
              </th:block>
            </th:block>


<!--            <li>
              <span class="fly-jing">飞翔的小子</span>
              <a href="#" class="jie-title">评论：你好啊，能数一下吗？</a>
              <i>1天前</i>
              <em>2018-01-08</em>
            </li>-->
          </ul>
        </div>
        <div class="layui-tab-item">
          <ul class="jie-row">
            <th:block th:if="${not #lists.isEmpty(sysNoticeList)}">
              <th:block th:each="notice,index:${sysNoticeList}">
                <li>
                  <span class="fly-jing">系统消息</span>
                  <a href="#" class="jie-title" th:text="${notice.noticeTitle}">你收到一条系统消息</a>
                  <i>更多</i>
                  <em th:text="${#dates.format(notice.createTime,'yyyy-MM-dd HH:mm:ss')}">2018-01-08</em>
                </li>
              </th:block>
            </th:block>

          </ul>
        </div>
      </div>
    </div>


  </div>

</div>



<script>
    $(".left-menu").removeClass("layui-this");
    $("#fly-message").addClass("layui-this")

    layui.use(['util', 'element', 'layer','upload','form','laytpl','laypage'], function(){
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var laytpl = layui.laytpl;
        var form = layui.form;
        var upload = layui.upload;
        var laypage = layui.laypage;
        var element = layui.element;//Tab的切换功能，切换事件监听等，需要依赖element模块
    });
  
    function read(commentId) {
        $.ajax({
            type: 'PUT',
            url: "../comment/read/" + commentId,
            dataType: "json",
            data: {},
            success: function (result) {
                if(result.success){
                    layer.msg("标记成功");
                }else {
                    layer.msg("标记失败");
                }
            }
        });
    }


</script>

</body>
</html>